<template>
  <div class="app-container">
    <el-card>
      <div class="block">

        <el-form v-if="checkPermission(['admin'])" :inline="true" :model="listQuery">
          <el-form-item label="企业名称">
            <el-select v-model="listQuery.company_name" size="small" style="width:220px" filterable clearable placeholder="">
              <el-option
                v-for="item in companyList"
                :key="item.company_name"
                :label="item.company_name"
                :value="item.company_name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="检查状态">
            <el-select v-model="listQuery.check_status" size="small" clearable placeholder="">
              <el-option
                v-for="item in checkStatusList"
                :key="item.name"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              size="small"
              icon="el-icon-search"
              @click.native="handleFilter"
            >搜索</el-button>
          </el-form-item>
        </el-form>

        <el-form>
          <el-form-item style="margin-bottom: 10px;">
            <el-button
              v-if="total === 0"
              v-permission="['company']"
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click.native="gotoForm"
            >填写自评</el-button>
          </el-form-item>
          <el-form-item style="margin-bottom: 10px;">
            <el-button
              v-permission="['admin']"
              type="primary"
              size="small"
              icon="el-icon-download"
              @click="downloadExcel"
            >下载查询结果excel</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        :header-cell-style="{background:'#f5f7fa'}"
        max-height="650"
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="企业名称" align="center" prop="company_name" width="150" fixed />
        <el-table-column label="填写日期" align="center" prop="updated_time" width="150" />
        <el-table-column label="企业联系人" align="center" prop="people_name" />
        <el-table-column label="联系人电话" align="center" prop="telephone" />
        <el-table-column label="状态" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.check_status | statusFilter">
              {{ row.check_status | textFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="检查日期" align="center" prop="check_time" width="150" />
        <el-table-column label="企业修改日期" align="center" prop="change_time" width="150" />
        <el-table-column label="检查人" align="center" prop="check_people_name" />
        <el-table-column label="检查意见" align="center" width="150">
          <template slot-scope="{row}">
            <el-button v-if="checkPermission(['company'])" type="text" @click="openDetail(row.check_opinion)"> 点击查看详细 </el-button>
            <el-tooltip v-else class="item" effect="dark" :content="row.check_opinion" placement="top-start">
              <span v-if="row.check_opinion.length > 8">{{ row.check_opinion.substring(0,8) }}...</span>
              <span v-else> {{ row.check_opinion }} </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <template v-for="(data, i) in tableHeader">
          <el-table-column :key="i" :label="data.label" align="left" width="80">
            <template slot-scope="{row}">
              <el-tag :type="row[data.key1][data.key2] | fileStatusFilter">
                {{ row[data.key1][data.key2] | fileTextFilter }}
              </el-tag>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="250px"
        >
          <template slot-scope="{row}">
            <el-button
              v-if="checkPermission(['company'])"
              type="danger"
              size="mini"
              plain
              icon="el-icon-edit"
              @click.native="goChange(row)"
            > 修改 </el-button>
            <el-button
              type="primary"
              size="mini"
              plain
              icon="el-icon-view"
              @click.native="viewDetail(row)"
            > 查看详情 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>

    <el-dialog
      title="查看企业自评"
      :visible.sync="dialogVisible"
      width="70%"
      :close-on-click-modal="false"
    >
      <el-form ref="dialogForm" status-icon :model="temp" label-width="80px" label-position="top" disabled>
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              企业名称
            </template>
            {{ temp.company_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              联系人电话
            </template>
            {{ temp.telephone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets" />
              联系人
            </template>
            {{ temp.people_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              地址
            </template>
            {{ temp.address }}
          </el-descriptions-item>
        </el-descriptions>

        <el-form-item label="自评表">
          <span style="color:grey"> 附件5自评表盖章扫描件 </span>
          <el-upload
            action=""
            :file-list="temp.self_assessment_table_f"
          >
            <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
              <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
              <label class="action">
                <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
              </label>
            </div>
          </el-upload>
        </el-form-item>

        <el-card style="margin-top:10px;">
          <div slot="header" class="clearfix">
            <span>指标一：符合项目选址及产业政策要求</span>
          </div>
          <el-form-item label="1.环境影响评价文件扫描件">
            <el-upload
              action=""
              :file-list="temp.category_1_f.category_1_1"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="2.批复文件扫描件">
            <el-upload
              action=""
              :file-list="temp.category_1_f.category_1_2"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="3.自主竣工验收、环保竣工验收文件扫描件">
            <el-upload
              action=""
              :file-list="temp.category_1_f.category_1_3"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
        </el-card>

        <el-card style="margin-top:10px;">
          <div slot="header" class="clearfix">
            <span>指标二：废水、废气、噪声达标排放</span>
          </div>
          <el-form-item label="1.排放口现场照片、采样口现场照片、采样平台照片">
            <el-upload
              action=""
              :file-list="temp.category_2_f.category_2_1"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="2.年度自行监测方案或监测计划">
            <el-upload
              action=""
              :file-list="temp.category_2_f.category_2_2"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="3.废水、废气、噪声监测报告扫描件">
            <el-upload
              action=""
              :file-list="temp.category_2_f.category_2_3"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="4.排污许许可管理企业提供监测数据“全国污染源监测信息管理与共享平台”发布联网照片(如有)">
            <el-upload
              action=""
              :file-list="temp.category_2_f.category_2_4"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="5.2021年的信用评价等级为环保诚信企业（绿牌）（如有）">
            <el-upload
              action=""
              :file-list="temp.category_2_f.category_2_5"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
        </el-card>

        <el-card style="margin-top:10px;">
          <div slot="header" class="clearfix">
            <span>指标三：无组织废气排放管控</span>
          </div>
          <el-form-item label="1.涉VOCs（化学原料和化学制品制造业；制药工业（医药制造业）；表面涂装行业；印刷行业（印刷和记录媒介复制业）；制鞋行业；人造板制造行业；电子元件制造业等行业企业提供整体密闭或废气集气罩收集、取消车间大风量风扇、含溶剂桶加盖、含溶剂废空桶加盖等相片）">
            <el-upload
              action=""
              :file-list="temp.category_3_f.category_3_1"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="2.产生无组织粉尘企业（提供废气集气罩收集等相片）">
            <el-upload
              action=""
              :file-list="temp.category_3_f.category_3_2"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="3.工艺废气企业（提供废气集气罩收集等相片）">
            <el-upload
              action=""
              :file-list="temp.category_3_f.category_3_3"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="4.废水曾因臭气扰民被投诉的企业（提供安装臭气收集管道及臭气治理设施等相片）">
            <el-upload
              action=""
              :file-list="temp.category_3_f.category_3_4"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
        </el-card>

        <el-card style="margin-top:10px;">
          <div slot="header" class="clearfix">
            <span>指标四：开展固体废物规范化管理</span>
          </div>
          <el-form-item label="1.固废仓门口和危废仓门口照片(包括存储场所、标识牌、管理制度)">
            <el-upload
              action=""
              :file-list="temp.category_4_f.category_4_1"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="2.固废、危废转移合同扫描件">
            <el-upload
              action=""
              :file-list="temp.category_4_f.category_4_2"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="3.固废、危废跨省备案资料扫描件（如有）">
            <el-upload
              action=""
              :file-list="temp.category_4_f.category_4_3"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="4.危废装载容器和包装物张贴标签相片、危废场所警示和危废标签相片、危废分类贮存相片">
            <el-upload
              action=""
              :file-list="temp.category_4_f.category_4_4"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="5.危废贮存场所相片、固废贮存场所相片、危废台帐相片、固废台帐相片">
            <el-upload
              action=""
              :file-list="temp.category_4_f.category_4_5"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="6.危废联单相片及“广东省固体废物管理信息平台”申报登记数据相片">
            <el-upload
              action=""
              :file-list="temp.category_4_f.category_4_6"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="7.工业危险废物产生单位规范化管理指标及抽查表">
            <el-upload
              action=""
              :file-list="temp.category_4_f.category_4_7"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
        </el-card>

        <el-card style="margin-top:10px;">
          <div slot="header" class="clearfix">
            <span>指标五：开展环境风险应急综合整治《关于进一步做好企业突发环境事件应急预案备案工作的通知》</span>
          </div>
          <el-form-item label="1.突发环境应急预案报告或报告封面及目录扫描件">
            <el-upload
              action=""
              :file-list="temp.category_5_f.category_5_1"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="2.突发环境应急预案备案文件扫描件">
            <el-upload
              action=""
              :file-list="temp.category_5_f.category_5_2"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
        </el-card>

        <el-card style="margin-top:10px;">
          <div slot="header" class="clearfix">
            <span>指标六：开展信息化管理建设</span>
          </div>
          <el-form-item label="1.废水限排企业、废水零排放企业在线监测设施安装合同扫描件">
            <el-upload
              action=""
              :file-list="temp.category_6_f.category_6_1"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="2.废水限排企业、废水零排放企业在线监测设施验收证明扫描件">
            <el-upload
              action=""
              :file-list="temp.category_6_f.category_6_2"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
        </el-card>

        <el-card style="margin-top:10px;">
          <div slot="header" class="clearfix">
            <span>指标七：达到环境管理综合要求</span>
          </div>
          <el-form-item label="1.排放口标志牌现场照片">
            <el-upload
              action=""
              :file-list="temp.category_7_f.category_7_1"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="2.雨污分流接驳信息登记表、排水许可证扫描件">
            <el-upload
              action=""
              :file-list="temp.category_7_f.category_7_2"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="3.排污许可证或排污登记表扫描件">
            <el-upload
              action=""
              :file-list="temp.category_7_f.category_7_3"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
        </el-card>

        <el-card style="margin-top:10px;">
          <div slot="header" class="clearfix">
            <span>指标八：采用污染防治可行技术</span>
          </div>
          <el-form-item label="1.在技术审核中，不可行的企业，需开展污染防治技术提升整治的企业填报">
            <el-upload
              action=""
              :file-list="temp.category_8_f.category_8_1"
            >
              <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                <a class="link-type" @click="onlineRead(file)"> <i class="el-icon-document" /> {{ file.name }} </a>
                <label class="action">
                  <span class="link-type" @click="downloadFile(file)"> 点此下载<i class="el-icon-download" /> </span>
                </label>
              </div>
            </el-upload>
          </el-form-item>
        </el-card>

      </el-form>

      <el-form v-if="checkPermission(['admin'])" ref="checkForm" :model="checkForm" :rules="rules" label-position="top">
        <el-form-item label="检查状态" prop="check_status">
          <el-select v-model="checkForm.check_status" style="width:220px" placeholder="请选择">
            <el-option
              v-for="item in checkStatusList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检查意见" prop="check_opinion">
          <el-input v-model="checkForm.check_opinion" type="textarea" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>

      <el-image-viewer
        v-if="previewImg"
        :on-close="closePreviewImage"
        :url-list="[imgUrl]"
        :z-index="9999"
      />

      <div slot="footer" class="dialog-footer">
        <el-button v-if="checkPermission(['admin'])" type="primary" @click="doCheck()">
          确定
        </el-button>
        <el-button @click.native="dialogVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script src="./index.js"></script>

<style>

.block {
  padding: 10px 0px;
}

.el-dialog__body .el-form-item__content {
  line-height: 0;
}

.el-dialog__body .el-form-item__content span {
  line-height: 20px;
}

.el-dialog__body .action {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: inherit;
}

.el-tooltip__popper{
max-width: 200px;
}

</style>
